<template>
<view class="u-page">
    <u--form labelPosition="left" labelAlign="left" :model="formData" :labelStyle="{'padding-left':'5rpx', 'margin':'10rpx 0'}">

        <u-form-item label="文本显示：" borderBottom>
            <view>{{formData.title}}</view>
        </u-form-item>

        <u-form-item label="输入框：" borderBottom>
            <u--input v-model="formData.title" placeholder="请输入关键字..." border="none"></u--input>
        </u-form-item>

        <u-form-item label="单一图片：\r\n文字换行" borderBottom>
            <!--fileList属性为字段变量名；其中uploadTemp为当前上传控件临时数据集变量；属性name为formData下的子字段名-->
            <u-upload
                name="image"
                :fileList="uploadTemp.image"
                :previewFullImage="true"
                @afterRead="afterRead"
                @delete="deletePic"
                multiple
                :maxCount="1"
            ></u-upload>
        </u-form-item>

        <u-form-item label="图片列表：" borderBottom>
            <!--fileList属性为字段变量名；其中uploadTemp为当前上传控件临时数据集变量；属性name为formData下的子字段名，多个时用[]作为后缀，name为多维时用.分割变量，当name为二维数组时fileList需要注意同步详情见如下示例-->
            <u-upload
                name="params.image_list[]"
                :fileList="uploadTemp.params_image_list"
                @afterRead="afterRead"
                @delete="deletePic"
                multiple
                uploadText="最多上传10张"
                :maxCount="10"
            ></u-upload>
        </u-form-item>

        <u-form-item label="分类：" prop="category" borderBottom>
            <!--input:disabled的文本框作为显示用途-->
            <u--input v-model="formData.category" @tap="category_show=true" disabled disabledColor="#ffffff" placeholder="请选择分类..." border="none"></u--input>
            <!--picker-->
            <u-picker
                :columns="category"
                :show="category_show"
                title="分类"
                @confirm="category_confirm"
                @cancel="formData.category='';category_show=false;"
                closeOnClickOverlay @close="category_show=false"
            ></u-picker>
            <!--右剪头图标-->
            <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item label="城市省市区：" prop="userInfo.name" borderBottom ref="item1">
            <!--picker城市选择-->
            <picker mode="region" @change="cityChange" :value="formData.city">
                <view class="picker">
                    {{formData.city[0]}}，{{formData.city[1]}}，{{formData.city[2]}}
                </view>
            </picker>
            <!--右剪头图标-->
            <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item label="地图标注：" borderBottom>
            <u--input v-model="formData.map" @tap="tapmap" placeholder="请选择地图定位..." suffixIcon="map-fill" suffixIconStyle="color: #909399" border="none" disabled disabledColor="#ffffff"></u--input>
        </u-form-item>

        <u-form-item label="单选-水果" borderBottom>
            <u-radio-group v-model="formData.radio">
                <u-radio :customStyle="{marginRight:'16px'}" v-for="(item, index) in radiolist1" :key="index" :label="item.label" :name="item.name"></u-radio>
            </u-radio-group>
        </u-form-item>

        <!--插件市场: https://ext.dcloud.net.cn/plugin?id=8170-->
        <u-form-item required label="用户名" prop="userId" borderBottom>
            <w-radio-picker v-model="formData.userId1" placeholder="请选择用户名" :options="optionsList" inputAlign="right" />
        </u-form-item>
        <u-form-item required label="用户名" prop="userId" borderBottom>
            <w-checkbox-picker v-model="formData.userId2" placeholder="请选择用户名" :options="optionsList" inputAlign="right" />
        </u-form-item>
        <u-form-item required label="所属公司" prop="orgName" borderBottom>
            <w-select-or-input v-model="formData.orgName" placeholder="请选择所属公司" :options="orgList" inputAlign="right" />
        </u-form-item>


        <u-form-item label="多选-爱好" borderBottom labelWidth="80">
            <u-checkbox-group v-model="formData.checkbox" shape="square" @change="change">
                <u-checkbox :customStyle="{marginRight:'16px'}" v-for="(item, index) in checkboxList1" :key="index" :label="item.label" :name="item.name"></u-checkbox>
            </u-checkbox-group>
        </u-form-item>

        <u-form-item label="简介" borderBottom>
            <u--textarea placeholder="不低于3个字..." v-model="formData.textarea" count></u--textarea>
        </u-form-item>

        <u-form-item label="前置图标" borderBottom>
            <u--input placeholder="前置图标" prefixIcon="search" border="none" prefixIconStyle="font-size:22px; color: #909399"></u--input>
        </u-form-item>

        <u-form-item label="验证码" borderBottom>
            <u--input v-model="formData.code" border="none" placeholder="请填写验证码"></u--input>
            <u-button slot="right" @tap="getCode" :text="tips" type="success" size="mini" :disabled="disabled1"></u-button>
            <u-code
                ref="uCode"
                @change="codeChange"
                seconds="20"
                @start="disabled1=true"
                @end="disabled1=false"
            ></u-code>
        </u-form-item>

        <u-form-item label="生日" borderBottom @click="showBirthday=true; hideKeyboard()">
            <u--input v-model="formData.userInfo.birthday" disabled disabledColor="#ffffff" placeholder="请选择生日" border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

    </u--form>

    <u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>

</view>
</template>

<script>
//OSS云插件
import uploadImage from '@/common/ossutil/uploadFile.js';
export default {
    data() {
        return {
            //当前文章id
            id: 0,
            //表单数组数据
            formData: {},
            //上传控件的临时变量, 有上传控件时需要单独定义这个变量 (这样才不会跟formData表单值混淆)
            uploadTemp:{},
            //所属分类，是否展开选项
            category_show: false,
            //所属分类，选项
            category: [['餐饮美食','休闲娱乐','旅游酒店','快递物流','商行超市','房产汽车','教育培训','艺术设计','医疗保健','服装鞋包','美容美发','IT数码','婚庆摄影','家居建材','母婴周边','商务服务','珠宝首饰','花店宠物','其他']],
            //radio单选的选项集（name属性即为唯一标识，可以换成数据id）
            radiolist1: [{name:'apple', label:'苹果', disabled:true}, {name:'banana', label:'香蕉', disabled:false}, {name:'orange', label:'橙子', disabled:false}],
            //checkbox选项集
            checkboxList1: [{name:'0', label:'羽毛球', disabled:true}, {name:'1', label:'跑步', disabled:false}, {name:'2', label:'爬山', disabled:false}],
            //编辑器
            editorValue:[],
            //获取手机验证码(共两个变量)
            tips: '',//按钮的文字
            disabled1: false,//禁用按钮的状态

            optionsList: [{id: 11, name: "选项11"},{id: 22, name: "选项22"}],
            orgList: ["选项一123"],
        };
    },
    /**
     * 转发（分享）
     */
    onShareAppMessage(res) {
        return {
            title: '和平商家',
            path: '/pages/merchant/merchant'
        }
    },
    onLoad(param) {
        //赋值给this
        if(param.id>0)
            this.id = param.id;
        //获取api默认表单数据
        this.getData();
        //城市省市区：初始化默认值
        this.formData.city = ['广东省', '广州市', '海珠区'];
        //单选-水果：初始化默认值（对应选项数据里的name字段为选项的唯一标签key）
        this.formData.radio = 'apple';
        //多选-爱好：初始化默认值（对应选项数据里的name字段为选项的唯一标签key）
        this.formData.checkbox = ['0','2'];//注意这里得用一维数组
        //简介：textarea默认内容（即使为空也要对变量赋值，不然count属性会导致有undefined的情况出现）
        this.formData.textarea = '';
        //onLoad的最后强制更新一下数据
        this.$forceUpdate();
    },
    methods: {
        /**
         * 获取api数据
         */
        getData() {
            var self = this;
            this.ajax({
                url: 'demo/formGetData',
                data: {
                    id: this.id,
                }
            }).then(res => {
                if (res.code == 200) {
                    //文章基础数据
                    self.formData = res.data;
                } else {
                    self.$alert(res.msg);
                }
            }).catch((err) => {
                console.log('错误提示: ', err);
            });
        },
        /**
         * 分类的picker点击确认时
         */
        category_confirm(e) {
            this.formData.category = e.value[0];
            this.category_show=false;
        },
        /**
         * 地图选择定位控件
         */
        tapmap(){
            let _self = this;
            uni.chooseLocation({
                success: function (res) {
                    _self.coordinate = res.latitude+","+res.longitude;
                    console.log('位置名称：' + res.name);
                    console.log('详细地址：' + res.address);
                    console.log('纬度：' + res.latitude);
                    console.log('经度：' + res.longitude);
                    //更新字段值
                    _self.formData.map = res.name;//位置名称
                    _self.formData.map_address = res.address;//详细地址
                    _self.formData.map_data = res.longitude + ',' + res.latitude; //经纬度
                }
            });
        },
        /**
         * 城市选择控件onChange时
         */
        cityChange(e) {
            //获取最新的城市选项值
            this.formData.city = e.detail.value
            //强制更新一下数据
            this.$forceUpdate();
        },
        /**
         * 获取验证码
         */
        getCode() {
            if (this.$refs.uCode.canGetCode) {
                // 模拟向后端请求验证码
                uni.showLoading({
                    title: '正在获取验证码'
                })
                setTimeout(() => {
                    uni.hideLoading();
                    // 这里此提示会被this.start()方法中的提示覆盖
                    uni.$u.toast('验证码已发送');
                    // 通知验证码组件内部开始倒计时
                    this.$refs.uCode.start();
                }, 2000);
            } else {
                uni.$u.toast('倒计时结束后再发送');
            }
        },
        /**
         * 验证码按钮文字的更新
         */
        codeChange(text) {
            this.tips = text;
        },
        /**************** upload图片上传控件 S****************/
        // 删除图片
        deletePic(event) {
            //过滤event.name中的[]字符
            let name = event.name.replace(/\[]/g,"");
            //不带字符.的临时变量名: name的.替换成_
            let name_temp = name.replace(/\./g,"_");
            //移除uploadTemp临时数据
            this.uploadTemp[name_temp].splice(event.index, 1);
            //得到多维变量的对象本身
            let self = this;
            let temp = this.$my.removeArrayFromKey(self.formData, name, event.index)
            //移除formData数据
            //temp.splice(event.index, 1);
            //强制更新数据：上面对this.uploadTemp[event.name]数组的更新可能不会得到及时响应，所以需要强制更新一下
            this.$forceUpdate();
        },
        // 新增图片
        async afterRead(event) {
            // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file)
            //过滤event.name中的[]字符
            let name = event.name.replace(/\[]/g,"");
            //不带字符.的临时变量名: name的.替换成_
            let name_temp = name.replace(/\./g,"_");
            //对象为空时给默认值
            this.uploadTemp[name_temp] = (typeof(this.uploadTemp[name_temp])=='undefined')?[]:this.uploadTemp[name_temp];
            //得到对象的length数量
            let fileListLen = this.uploadTemp[name_temp].length
            //循环对象
            lists.map((item) => {
                this.uploadTemp[name_temp].push({
                    ...item,
                    status: 'uploading',
                    message: '上传中'
                })
            })
            for(let i = 0; i < lists.length; i++) {
                //result为上传成功后返回的路径
                const result = await this.uploadFilePromise(lists[i].thumb);
                let item = this.uploadTemp[name_temp][fileListLen];
                if(typeof(this.formData[name]) != 'object')
                    this.formData[name] = [];
                //url直接赋值给表单数组:formData, 存在[]时表示为多图数组
                debugger
                if(event.name.indexOf('[]') >= 1)
                    this.formData = this.$my.arr2varObject(this.formData, 'name').push(result);
                //单图
                else
                    this.formData[name] = result;
                debugger
                //赋值给临时数据集:uploadTemp
                this.uploadTemp[name_temp].splice(fileListLen, 1, Object.assign(item, {
                    status: 'success',
                    message: '',
                    url: result
                }))
                //强制更新数据：上面对this.uploadTemp[name_temp]数组的更新可能不会得到及时响应，所以需要强制更新一下
                this.$forceUpdate();
                fileListLen++
            }
        },
        //上传资源至云服务 (请提前在common/ossutil/config.js中配置好OSS参数)
        uploadFilePromise(url) {
            return new Promise((resolve, reject) => {
                //压缩图片
                uni.compressImage({
                    src: url,
                    width: 1000,//最大宽度
                    height:1000,//最大高度
                    quality: 60,//质量60%
                    success: res => {
                        //上传图片至阿里云OSS【图片路径可自行修改，如下图为上传至shop/test/目录下】
                        uploadImage(res.tempFilePath, 'shop/test/', result => {
                            //返回上传成功后的oss路径：result
                            resolve(result)
                        })
                    }
                })
            })
        },
        /**************** upload图片上传控件 E****************/
        submit() {
            console.log(this.formData);
        }
    }
}
</script>

<style lang='scss'>
/*页面的全局padding*/
.u-page{
    padding:20rpx;
}
/*整体页面的字体大小定义*/
view{
    font-size:29rpx !important;
}
/*对input默认样式的修正*/
.u-input__content__field {
    display: block !important;
    margin-right:20rpx !important;
    font-size: 28rpx !important;
}
/*form表单左右侧的宽度*/
.u-form-item__body__left{
    width:200rpx !important;
}
.u-form-item__body__right{
    width:510rpx !important;/*左padding的20+左侧栏200+右侧内容510+右padding的20=750rpx*/
}
/*textarea默认会有个300的宽度，需要将其设置为width:auto*/
textarea{
    width:100% !important;
}
/*上传预览列表的样式调整*/
.u-upload__wrap__preview, .u-upload__button {
    margin-right:5px !important;
}
</style>